import { useNavigate, useSearchParams } from 'react-router-dom';
import '../css/HomeList.css'
import { ArrowLeft, ShareO } from '@react-vant/icons';
import { useEffect, useState } from 'react';
import http from '../utils/request'
import { Arrow } from '@react-vant/icons';
import { Rate } from 'react-vant';

const DoctorDetails = () => {
    const [value1, setValue1] = useState(3);
    const [value2, setValue2] = useState(4);
    const [value3, setValue3] = useState(5);
    const [value4, setValue4] = useState(4);
    const navigate = useNavigate();
    const [searchParams] = useSearchParams();
    const [doctorId] = useState(searchParams.get('id'))
    const [doctorList, setDoctorList] = useState<Array<any>>([])
    const [doctorDetail, setDoctorDetail] = useState<any>([])
    const getDoctorDetail = () => {
        http.get('/doctor')
            .then((res) => {
                setDoctorList(res.data.doctorList)
                res.data.doctorList.map((item1: any) => {
                    if (item1._id == doctorId) {
                        setDoctorDetail(item1.childrenZuoPin)
                    }
                })
            })
            .catch((err) => {
                console.log(err)
            })

    }

    useEffect(() => {
        getDoctorDetail()
    }, [])
    return (
        <>
            <div className='lunbo-header'>
                <ArrowLeft onClick={() => navigate('/')} />
                <h4>医师详情</h4>
                <div>
                    <ShareO />
                </div>
            </div>
            <div className='doctorDetailBack'>
                {
                    doctorList.map((item, index) => {
                        if (item._id === doctorId) {
                            return (
                                <div key={index} className='doctorDetail'>
                                    <img src={item.src} alt="" width={100} height={100} />
                                    <p>{item.name}</p>
                                    <p>{item.denJi}|{item.conYe}</p>
                                </div>
                            )
                        }
                    })
                }
                <div className='doctorDetailIntro'>
                    <p>老师简介</p>
                    <p style={{ fontSize: '14px', color: '#666', marginTop: '10px' }}>从事宠物行业四年多，因为热爱而选择，我会不懈努力提升自己，为自己喜爱的宠物行业风险热血青春，为可爱的毛孩子们提供更加专业，更加安全的服务。</p>
                    <div className='doctorDetailIntroContent'>
                        <div>萌系</div>
                        <div>细心</div>
                    </div>
                </div>
            </div>
            <div className='doctorDetailZuoPinDetail'>
                <div className="doctorDetailZuoPin">
                    <h2>作品</h2>
                    <div onClick={() => {
                        navigate(`/DoctorZuoPin?id=${doctorId}`)
                    }}>
                        <span>查看全部</span>
                        <Arrow />
                    </div>
                </div>
                <div className='doctorDetailZuoPinContent'>
                    {
                        doctorDetail.map((item: any, index: any) => {
                            return (
                                <div key={index}>
                                    <img src={item.childrenSrc} alt={item.childrenName} width={100} height={70} />
                                    <p>{item.childrenName}</p>
                                </div>
                            )
                        })
                    }
                </div>

            </div>
            <div className='doctorDetailPinJia'>
                <h2>热门评价</h2>
                <div className='doctorDetailPinJiaContentBigBox'>
                    <div className='doctorDetailPinJiaContent1'>
                        <div className='doctorDetailZuoPinItem'>
                            <img src="https://cdn8.axureshop.com/demo/2214224/images/%E7%BE%8E%E5%AE%B9%E5%B8%88%E4%BB%8B%E7%BB%8D/%E6%A4%AD%E5%9C%86%E5%BD%A2_u2091.png" alt="one" width={50} height={50} />
                            <div style={{ marginLeft: '10px' }}>
                                <p>开心宝宝每一天</p>
                                <Rate value={value1} onChange={setValue1} color='orange' />
                            </div>
                        </div>
                        <div>3天前</div>
                    </div>
                    <p style={{ marginTop: '15px' }}>
                        第一次来这家店，店员小姐姐服务非常受到，非常耐心指导，泡芙一点也没闹，下次还会来这里的。
                    </p>
                </div>
                <div className='doctorDetailPinJiaContentBigBox'>
                    <div className='doctorDetailPinJiaContent1'>
                        <div className='doctorDetailZuoPinItem'>
                            <img src="https://cdn8.axureshop.com/demo/2214224/images/%E7%BE%8E%E5%AE%B9%E5%B8%88%E4%BB%8B%E7%BB%8D/%E6%A4%AD%E5%9C%86%E5%BD%A2_u2105.png" alt="one" width={50} height={50} />
                            <div style={{ marginLeft: '10px' }}>
                                <p>哈利波特</p>
                                <Rate value={value2} onChange={setValue2} color='orange' />
                            </div>
                        </div>
                        <div>2021-05-21</div>
                    </div>
                    <p style={{ marginTop: '15px' }}>
                        环境好，服务好，没有异味，价格合理，必须好评。
                    </p>
                </div>
                <div className='doctorDetailPinJiaContentBigBox'>
                    <div className='doctorDetailPinJiaContent1'>
                        <div className='doctorDetailZuoPinItem'>
                            <img src="https://cdn8.axureshop.com/demo/2214224/images/%E7%BE%8E%E5%AE%B9%E5%B8%88%E4%BB%8B%E7%BB%8D/%E6%A4%AD%E5%9C%86%E5%BD%A2_u2116.png" alt="one" width={50} height={50} />
                            <div style={{ marginLeft: '10px' }}>
                                <p>王泡芙</p>
                                <Rate value={value3} onChange={setValue3} color='orange' />
                            </div>
                        </div>
                        <div>2022-07-15</div>
                    </div>
                    <p style={{ marginTop: '15px' }}>
                        这家店的老客户了，家里的泡芙一直来这家店。
                    </p>
                </div>
                <div className='doctorDetailPinJiaContentBigBox'>
                    <div className='doctorDetailPinJiaContent1'>
                        <div className='doctorDetailZuoPinItem'>
                            <img src="https://cdn8.axureshop.com/demo/2214224/images/%E7%BE%8E%E5%AE%B9%E5%B8%88%E4%BB%8B%E7%BB%8D/%E6%A4%AD%E5%9C%86%E5%BD%A2_u2127.png" alt="one" width={50} height={50} />
                            <div style={{ marginLeft: '10px' }}>
                                <p>bebe</p>
                                <Rate value={value4} onChange={setValue4} color='orange' />
                            </div>
                        </div>
                        <div>2023-01-01</div>
                    </div>
                    <p style={{ marginTop: '15px' }}>
                        非常满意，这里的医师都很专业，超级好，非常耐心而且问任何问题都耐心解答。
                    </p>
                </div>
            </div>
            <p style={{ color: '#999', fontSize: '13px', marginTop: '30px', marginBottom: '50px', marginLeft: '10%' }}>- - - - - - - - - - - - - - - - 我是有底线的 - - - - - - - - - - - - - - - -</p>
        </>
    )
}

export default DoctorDetails;